<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生违纪情况</title>
    <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script src="../js/jquery.min.js"></script>
    <style>
        /*设置背景*/
        body{
            background-color: #ecf5ec;
        }
        /*最上方图片居中*/
        #img_three_1{
            height: 79px;
            width: 354px;
            margin: auto;
            margin-bottom: 50px;
        }
        /*表格样式*/
        #tab_three_table{
            width: 700px;
            font-size: 15px;
            margin: auto;
        }
        tr{
           height: 50px;
        }
    </style>
    <script>
        $(function () {
            $.get("stu/breakTheRule",{},function (data) {
                //字符串拼接
                var str = '<tr class="info">\n' +
                    '            <th>违纪情况</th>\n' +
                    '            <th>违纪时间</th>\n' +
                    '        </tr>';

                //遍历list集合
                for(var i=0 ; i<data.length ; i++){
                    if (i%2 == 0){
                        str += '<tr class="active">\n' +
                            '            <td>'+data[i].cause+'</td>\n' +
                            '            <td>'+data[i].vdate+'</td>\n' +
                            '        </tr>';
                    }else{
                        str += '<tr class="info">\n' +
                            '            <td>'+data[i].cause+'</td>\n' +
                            '            <td>'+data[i].vdate+'</td>\n' +
                            '        </tr>';
                    }
                }
                //拼接完，放入table标签的标签体中
                $("#tab_three_table").html(str);

            },"json");
        })
    </script>


</head>
<body>

    <div id="img_three_1"><img src="../img/stu_4.png" id="img_hint"></div>

    <table class="table table-hover" id="tab_three_table">
        <tr class="info">
            <th>违纪情况</th>
            <th>违纪时间</th>
        </tr>
        <tr class="active">
            <td></td>
            <td></td>
        </tr>
        <tr class="info">
            <td></td>
            <td></td>
        </tr>
    </table>

    <div style="float: right;margin-right: 150px">
        <a href="stu_main_page.html" class="btn btn-info">返回主界面</a>
    </div>
</body>
</html>